<template>
	<view>
		<view class="change-info-box">
			<view class="info-header">
				<uv-button color="#FFF" open-type="chooseAvatar" :custom-style="customStyle" @chooseavatar="onChoose">
					<uv-avatar v-if="infoForm.img" :size="60" :src="infoForm.img" shape="square"></uv-avatar>
					<uv-avatar v-else :size="60" :src="userInfo.avatar" shape="square"></uv-avatar>
				</uv-button>
			</view>
			<view class="info-form">
				<uv-form :model="infoForm" label-width="60">
					<uv-form-item label="新昵称">
						<uv-input v-model="infoForm.nikename" type="nickname"  :placeholder="userInfo.name"
							border="bottom"></uv-input> 
					</uv-form-item>
					<uv-form-item>
						<uv-button type="primary" shape='circle' @click="handleSave">保存</uv-button>
					</uv-form-item>
				</uv-form>
			</view>

		</view>
		<!-- #ifdef MP-WEIXIN -->
		<!-- 小程序隐私协议 -->
		<privacy-popup></privacy-popup>
		<!-- #endif -->
	</view>
</template>

<script>
	import { updateUserInfo } from '@/utils/http.js'
	import baseconfig from '@/config.js'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				infoForm: {
					img: '',
					nikename: '',
				},
				baseurl: baseconfig.api_url,
				customStyle: { height: '70px', width: '70px', BorderRadius: '35px' }

			}
		},
		computed: { ...mapState({ userInfo: state => state.user.userInfo }) },
		onReady() {

		},
		onLoad() {},
		methods: {
			 
			getwexuserinfo(e) {
				console.log(e)
			},
			onChoose(e) {
				console.log(e)
				this.infoForm.img = e.avatarUrl
			},
			handleSave() {
				if (!this.infoForm.img && !this.infoForm.nikename) {
					uni.showToast({
						title: "头像/昵称未修改",
						icon: "error"
					})
					return
				}
				var fileData = null
				if (this.infoForm.img) {

					fileData = [{ name: 'avatar', uri: this.infoForm.img }]
				}
				updateUserInfo(this.infoForm.nikename, fileData).then(res => {
					const { code } = res
					if (code === 200) {
						uni.showToast({ title: '修改成功' })
						this.$store.dispatch('user/reloadUser')
						uni.switchTab({ url: "/pages/mine/mine" })
					} else {
						uni.showToast({
							icon: 'fail',
							title: '修改失败'
						})
					}

				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.change-info-box {
		padding: 10px;
		background-color: #fff;

		.info-header {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
	}
</style>